<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5 Drag and drop</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    <script src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>
    <style>
        .container {
            display: inline-block;
            min-height: 200px;
            min-width: 360px;
            color: #f30;
            padding: 30px;
            border: 3px solid #ddd;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
        }

        .preview {
            max-width: 360px;
        }

        #files-list {
            position: absolute;
            top: 0;
            left: 500px;
        }

        #list {
            width: 460px;
        }

        #list .preview {
            max-width: 250px;
        }

        #list p {
            color: #888;
            font-size: 12px;
        }

        #list .green {
            color: #09c;
        }
    </style>
</head>
<body>

<div id="section">
    <p>put image into here : </p>

    <div id="container" class="container">

    </div>
    <div id="files-list">
        <p>has been draged file : </p>
        <ul id="list"></ul>
    </div>
    <div id="result"/>
</div>

<script>

    if (window.FileReader) {

        var list = document.getElementById('list'),
                cnt = document.getElementById('container');

        function isImage(type) {
            switch (type) {
                case 'image/jpeg':
                case 'image/png':
                case 'image/gif':
                case 'image/bmp':
                case 'image/jpg':
                    return true;
                default:
                    return false;
            }
        }

        function handleFileSelect(evt) {
            evt.stopPropagation();
            evt.preventDefault();
            var address = "ws://127.0.0.1:1234/second/upload";

            var ws = new WebSocket(address);

            var files = evt.dataTransfer.files;

            for (var i = 0, f; f = files[i]; i++) {

                var t = f.type ? f.type : 'n/a',
                        reader = new FileReader(),
                        isImg = isImage(t),
                        img;
                reader.onloadstart = function () {
                    console.info("loaded")

                }

                reader.onload = (function (theFile) {
                    return function (e) {
                        console.info("reader loaded");

                        /*
                         var uploadStatus = 0;
                         ws.onopen = function(){

                         document.getElementById('result').innerHTML += "on open <br/>";
                         msg = {"FILE_NAME":theFile.name};
                         ws.send($.toJSON(msg));
                         }

                         ws.onmessage = function(evt){

                         if (theFile.size > evt.data){
                         document.getElementById('result').innerHTML += "sending<br/>";
                         ws.send(reader.result.split(",")[1]);
                         }else{
                         document.getElementById('result').innerHTML += "send over</br>";
                         }

                         }
                         */
                    };
                })(f)

                reader.onerror = function (evt) {
                    alert(evt.target.error.code)
                };


                length = parseInt(f.size / 10);
                console.info(f.size + ":" + length);

                for (var i = 0; i <= 10; i++) {
                    sendedLength = i * length;
                    if ((i + 1) * length < f.size) {
                        blob = f.webkitSlice(sendedLength, length);
                    } else {
                        blob = f.webkitSlice(sendedLength, (f.size - sendedLength));
                    }
                    console.info("sended = " + (sendedLength + length));
                    console.info(reader.readAsDataURL(blob));
                }

            }

        }

        function handleDragEnter(evt) {
            this.setAttribute('style', 'border-style:dashed;');
        }

        function handleDragLeave(evt) {
            this.setAttribute('style', '');
        }

        function handleDragOver(evt) {
            evt.stopPropagation();
            evt.preventDefault();
        }

        cnt.addEventListener('dragenter', handleDragEnter, false);
        cnt.addEventListener('dragover', handleDragOver, false);
        cnt.addEventListener('drop', handleFileSelect, false);
        cnt.addEventListener('dragleave', handleDragLeave, false);

    } else {
        document.getElementById('section').innerHTML = 'sorry !! your browser can not support html5';
    }

</script>

</body>
</html>
